<template>
	<view>
		<map id="map" ref="aroundMap" show-location="true" style="width: 100%; height: 600upx;" :latitude="latitude" :longitude="longitude"
		 :markers="covers">
		</map>
		<view>
			<view class="d-flex a-center" style="justify-content: space-around;height: 88upx;margin-top: 20upx;">
				<view v-for="(item,index) in retriveType" @click="switchTab(item)" :key="index" :class="retriveField === item.typeName ? 'type-select' : ''">
					<text class="iconfont" :class="item.iconClass"></text>
					<text style="font-weight: bold;margin-left: 6upx;">{{item.typeName}}</text>
				</view>
			</view>
			<scroll-view scroll-y="true" :style="'height:' + scrollH + 'px;'">
				<view>
					<view @tap="moveToCenter(item)" v-for="(item,index) in retriveResult" :key="index" style="width: 690upx;padding: 0 30upx;" class="d-flex a-center j-sb border-bottom">
						<view class="d-flex flex-column" style="width: 590upx;">
							<text style="font-size: 32upx;font-weight: bold;">{{item.name}}</text>
							<text class="single-row-over">{{item.address}}</text>
						</view>
						<text>{{item.distance}}m</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mapCtx: null,
				map: null,   //地图对象
				searchKeyObj: null,   //检索对象
				centerPoint: null,
				longitude: 120.744207,
				latitude: 31.272833,
				covers: [{
					longitude: 120.744207,
					latitude: 31.272833,
					iconPath: '../../../static/images/estate/location.png',
					title: '顶级楼层'
				}],
				coversM: [],
				centerCoverObj: null,
				retriveType:[{
					iconClass: 'icon-gongjiaoche',
					typeName: '公交'
				},{
					iconClass: 'icon-xuexiao',
					typeName: '学校'
				},{
					iconClass: 'icon-canyin',
					typeName: '餐饮'
				},{
					iconClass: 'icon-ziyuan',
					typeName: '购物'
				}],
				tabIndex: 0,
				scrollH: 600,
				retriveField: '公交',
				retriveResultM: [],
				retriveResult: []   //检索结果
			}
		},
		onLoad(options) {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(718);
				}
			});
			this.retriveField = options.type;
			this.covers = JSON.parse(decodeURIComponent(options.position));
			this.centerCoverObj = this.covers[0];
		},
		onReady() {
			this.newMap()
		},
		onShow() {
			
		},
		mounted() {
			
		},
		methods: {
			newMap() {
				this.mapCtx = uni.createMapContext("map", this);
				this.map = this.mapCtx.$getAppMap();
				this.searchKeyObj = new plus.maps.Search(this.map);
				this.centerPoint = new plus.maps.Point(this.covers[0].longitude,this.covers[0].latitude);
				this.executeTypeRetrive();
			},
			executeTypeRetrive(){
				let _this = this;
				_this.searchKeyObj.poiSearchNearBy(this.retriveField,this.centerPoint,1000);
				_this.searchKeyObj.onPoiSearchComplete = function(state,result){
					if(result.poiList.length > 0){
						let poiList = result.poiList;
						_this.retriveResultM = [];
						_this.covers = _this.covers.slice(0,1);
						_this.coversM  = [..._this.covers];
						_this.calculateDistance(poiList,0);
						console.log(result)
					}else{
						_this.covers = _this.covers.slice(0,1);
						_this.coversM  = [..._this.covers];
					}
				}
			},
			calculateDistance(poiList,index){
				if(index == poiList.length){
					this.retriveResult = this.retriveResultM;
					this.covers = this.coversM;
					return;
				}
				let _this = this;
				let curPoint = new plus.maps.Point(poiList[index].point.longitude,poiList[index].point.latitude);
				plus.maps.Map.calculateDistance(this.centerPoint,curPoint,function(event){
					if(event && event.distance){
						_this.retriveResultM.push({
							distance: Math.floor(event.distance),
							name: poiList[index].name,
							address: poiList[index].address,
							point: poiList[index].point,
							iconPath: '../../../static/images/estate/bubble.png',
						})
						_this.coversM.push({
							longitude: poiList[index].point.longitude,
							latitude: poiList[index].point.latitude,
							iconPath: '../../../static/images/estate/bubble.png',
							title: '顶级楼层'
						})
						++index;
						_this.calculateDistance(poiList,index);
					}
				},function(e){
					
				})
			},
			switchTab(item){
				this.retriveField = item.typeName;
				this.executeTypeRetrive();
			},
			moveToCenter(item){
				let curCenter = new plus.maps.Point(item.point.latitude,item.point.longitude);
				// this.map.setCenter(curCenter);
				// this.mapCtx.moveToLocation(item.point.latitude,item.point.longitude)
			}
		}
	}
</script>

<style scoped>
.type-select{
	color: #005BAD;
}
</style>
